import React, { useCallback, useState } from 'react'
import AssistantCard from '@COMPONENTS/Card/AssistantCard'
import { ChoiceITF } from '@INTERFACES/Survey'
import ExpandTree from '@COMPONENTS/Survey/ExpandTree'
import { LanguageType } from '@INTERFACES/Common'
import i18n from '@I18N'
import { showToast } from '@UTILS/common'
import style from '@COMPONENTS/Decision/EvaluationChoiceCard.module.scss'

interface Props {
  title: string
  data: ChoiceITF[]
  language: LanguageType
  answerChoice: ChoiceITF
  onClickChoice: (choice: ChoiceITF) => void
}

const EvaluationSubChoiceCard: React.FC<Props> = ({ title, data, language, answerChoice, onClickChoice }) => {
  const [currentAnswerChoice, setCurrentAnswerChoice] = useState<ChoiceITF>(answerChoice)
  const onClickConfirm = useCallback(() => {
    if (!currentAnswerChoice) {
      showToast('请先选择')
      return
    }
    onClickChoice?.(currentAnswerChoice)
  }, [currentAnswerChoice, onClickChoice])
  const onClickChoiceFuc = useCallback((choice: ChoiceITF) => {
    setCurrentAnswerChoice(choice)
  }, [])
  return (
    <AssistantCard
      isHasBtn
      btnText={i18n.common.confirm()}
      contentClass={style.contentStyle}
      title={title}
      onClickBtn={onClickConfirm}
    >
      <ExpandTree
        data={data}
        lastNoBorder
        language={language}
        answerChoice={currentAnswerChoice}
        onClickChoice={onClickChoiceFuc}
      />
    </AssistantCard>
  )
}

export default EvaluationSubChoiceCard
